<template>
  <div class="item-box">
    <block-header icon="/static/icon/two.png" rmark="phone" title="使用过的手机" number="2"></block-header>
    <ul v-if="data.length > 0">
      <li v-for="(item,index) in data" :class="(index+1) === data.length ? '' : 'border-bottom'">
        <div>IMEI ：<span>{{item.number}}</span></div>
        <div>其他手机号 ：
          <span class="mobile"
                v-for="(m,mi) in item.mobile"
                :key="mi">
            <span v-init-tooltips='{
             tableName: m.tableName,
             systemid: m.systemid,
             bsh: m.sjh,
             bshlx: "004"
            }'>{{m.sjh}}</span>
            <i v-if="mi < item.mobile.length - 1">, </i>
          </span>

        </div>
      </li>
    </ul>
    <span v-else class="tip-null">暂无数据</span>
  </div>
</template>

<script>
  import BlockHeader from '../../components/block-header'

  export default {
    components: {
      BlockHeader
    },
    methods: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0 0 10px 0;
    background-color: #fff;
    li {
      margin-left: 35px;
      min-height: 80px;
      div {
        line-height: 40px;
        a {
          color: #868686;
        }
        span {
          word-wrap: break-word;
          color: #000;
        }
        .mobile {
          color: #5077aa;
        }
      }
    }
  }

  .border-bottom {
    border-bottom: 1px solid #ddd;
  }
</style>


